<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符云</title>
    <script src="/static/js/echarts.min.js"></script>
    <script src="/static/js/echarts-wordcloud.min.js"></script>
    <script src="/static/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="wordCloud" style="width: 80%;height: 80vh;margin: 0 auto" class="">

</div>

<script>

    var chart = echarts.init(document.getElementById('wordCloud'));

    {#var data = [#}
    {#        {% for district in districts %}{name: "{{ district.district }}", value:{{district.num}}},{% endfor %}#}
    {#];#}

    // 实例化一个图片
    var maskImage = new Image();

    // 异步加载
    $.get('/static/json/province.json').done(
        function (data) {
            var option = {
                series: [{
                    type: 'wordCloud',

                    // 要绘制的“云”的形状。可以是表示为回调函数或存在的关键字。可用的shape是circle（默认,圆），
                    // cardioid（apple 或 heart 形状曲线，最著名的极坐标方程），diamond（正方形的别名），正三角形，正三角形（正三角形，五边形和星形的别名）。
                    shape: 'pentagon',

                    // 数据值将映射到的文本大小范围。默认为最小12像素，最大60像素。
                    sizeRange: [10, 60],

                    // 文字旋转范围和步长。文本将通过旋转步骤45在[-90，90]范围内随机旋转
                    rotationRange: [-90, 90],
                    rotationStep: 45,

                    // 网格大小（以像素为单位），用于标记画布的可用性,网格大小越大，单词之间的间隔越大。
                    gridSize: 2,

                    // 设置为true可以使单词部分在画布之外绘制。允许绘制大于画布大小的单词
                    drawOutOfBound: false,

                    // 一个轮廓图，白色区域将从图形文本中排除。shape选项将随着云的形状增长而继续应用。
                    maskImage: maskImage,

                    // 全局文字样式
                    textStyle: {
                        normal: {
                            // 颜色可以是回调函数或颜色字符串
                            color: function () {
                                // 随机颜色
                                return 'rgb(' + [
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160),
                                    Math.round(Math.random() * 160)
                                ].join(',') + ')';
                            }
                        }
                    },
                    // 数据排序
                    data: data.sort(function (a, b) {
                        return b.value - a.value;
                    })
                }]
            };
            maskImage.onload = function () {
                option.series[0].maskImage
                chart.setOption(option);
            }
            // 随机抽取图片渲染
            imgs = ['qq.jpg', 'logo.png']
            var i = Math.round(Math.random() * 1)
            maskImage.src = '/static/images/' + imgs[i];
        }
    )


</script>
</body>
</html>